<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        第二种方式（内部样式表）：
            -将样式写到head中的style标签里
     -->
     <!-- <style>
        p{
            color: red;
            font-size: 60px;
        }

     </style> -->
     <!-- 
         第三种方式：（外部样式表） 最佳实践
            -可以将css样式编写到一个外部的css文件中
                然后通过link标签来引入外部的css文件
            
      -->

      <link rel="stylesheet" href="./style.css">


</head>
<body>
    <!--
        网页分成三个部分
            结构(html)
            表现（css）
            行为（javascript）
        css
            -层叠样式表
            -网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式
                而最终我们能看到知识网页的最上边一层

        第一种方式（内联样式，行内样式）
            -在标签内通过style属性来设置元素的样式
            -问题
                使用内联样式：样式只能对一个标签生效
                    如果希望影响到多个元素必须在每一个元素中都复制一遍
            -注意，开发时绝对不要使用内联样式
      -->

      <!-- <p style="color: red; font-size: 60px;">少小离家老大回</p>
      <p style="color: red; font-size: 50px;">今天天气真不错</p> -->
      <p>秋天共长天一色</p>

</body>
</html>